
<template>
    <div class="block">
        <a href="javascript:void(0)">
            <div class="tu tu_a">&nbsp;</div>
            <div class="name">{{title}}</div>
            <p>{{desc}}</p>
            <div class="f_line">&nbsp;</div>
        </a>
    </div>
</template>
<script>
export default {
    props: {
        title: {
            type: String,
            default: function() {
                return ""
            }
        },
        desc: {
            type: String,
            default: function() {
                return ""
            }
        }

    }
}
</script>
<style lang="stylus" scoped>
.block
    .tu
        display:inline-block; *display:inline; zoom:1; width:160px; height:160px; border:1px solid #bbb; border-radius:200%; -moz-border-radius:200%; -webkit-border-radius:200%; margin-bottom:20px;transition: 0.7s;-moz-transition:  0.7s;-webkit-transition:  0.7s;-o-transition:  0.7s;
    .tu_a
        background:url(http://www.lianzhuoyue.com/Assets/images/icon_5.png) no-repeat center center;
    .name
        width:100%; height:34px; line-height:30px; padding-top:5px; font-size:20px;
    .f_line
        width:90%; margin:0px auto; height:2px; position:absolute; left:5%; bottom:0px; z-index:99; background:#004588; display:none;
    .name 
        width:100%; height:34px; line-height:30px; padding-top:5px; font-size:20px;
    a 
        color:#818181;cursor: auto;
        &:hover
            color:#004588;
            .tu
                border:1px solid #004588;-moz-transform: rotate(360deg);-webkit-transform: rotate(360deg);transform: rotate(360deg);
            .tu_a
                background:url(http://www.lianzhuoyue.com/Assets/images/icon_5a.png) no-repeat center center;
            .f_line
                display:block;
    
</style>